<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>smart</title>
		<script>
			window.onload = function() {
				var jifen = 0; //总积分
				var play = 0; //转盘启动时为1，停止时为0
				var startAngle = 0; //阴影位置标记
				var spinTime = 0; //已执行的步长
				var spinTimeTotal = 0; //总步长
				var goals = ['+1', '-3', '+3', '0', '+2', '+4', '-1', '-2'];
				//var gx = ["180", "320", "410", "410", "320", "180", "90", "90"];
				//var gy = ["90", "90", "180", "320", "410", "410", "320", "180"];
				var oc = document.getElementById('smart');
				var ocw = oc.clientWidth;
				var och = oc.clientHeight;
				var gx = [ocw * 9 / 25, ocw * 16 / 25, ocw * 41 / 50, ocw * 41 / 50, ocw * 16 / 25, ocw * 9 / 25, ocw * 9 / 50, ocw * 9 / 50];
				var gy = [ocw * 6 / 50, ocw * 6 / 50, ocw * 8 / 25, ocw * 29 / 50, ocw * 19 / 25, ocw * 19 / 25, ocw * 29 / 50, ocw * 8 / 25];
				var ctx = oc.getContext('2d');
				var bgi = new Image();
				bgi.src = 'img/icon-27.png';
				var i1 = new Image();
				i1.src = 'img/icon-01.png';
				var i2 = new Image();
				i2.src = 'img/icon-02.png';
				var i3 = new Image();
				i3.src = 'img/icon-04.png';
				var i4 = new Image();
				i4.src = 'img/icon-03.png';
				drawAll();
				oc.addEventListener('click', function(e) {
					if (0 == play) {
						var x = e.offsetX;
						var y = e.offsetY;
						if ((x - ocw / 2) * (x - ocw / 2) + (y - ocw * 11 / 25) * (y - ocw * 11 / 25) < ocw * ocw / 25) {
							play = 1;
							spinTime = 0;
							spinTimeTotal = Math.floor(Math.random() * 24 + 22);
							drawTag();
						}
					}
				});

				function drawAll(nooi) {
					ctx.clearRect(0, 0, ocw, och);
					ctx.drawImage(bgi, 0, 0, ocw, och);
					ctx.drawImage(i1, ocw / 10, ocw / 25, ocw * 4 / 5, ocw * 4 / 5);
					//ctx.drawImage(i2, ocw / 5, ocw / 5, ocw * 3 / 5, ocw * 3 / 5);
					ctx.fillStyle = 'rgb(81, 92, 112)';
					ctx.beginPath();
					ctx.arc(ocw / 2, ocw * 11 / 25, ocw * 29 / 100, 0, 360, false);
					ctx.closePath();
					ctx.fill();
					ctx.drawImage(i3, ocw * 3 / 10, ocw * 6 / 25, ocw * 2 / 5, ocw * 2 / 5);
					ctx.fillStyle = '#FFFFFF';
					ctx.font = ocw / 25 + 'px 黑体';
					ctx.textAlign = 'center';
					ctx.textBaseline = 'middle';
					for (var i = 0; i < 8; i++) {
						//var cx = parseInt(gx[i]);
						//var cy = parseInt(gy[i]);
						//ctx.fillText(goals[i], cx, cy);
						if (i != nooi) {
							ctx.fillText(goals[i], gx[i], gy[i]);
						}
					}
					ctx.fillText('我的积分', ocw / 2, ocw * 89 / 100);
					var outji = '';
					if (jifen < 1000) {
						outji += '0';
					}
					if (jifen < 100) {
						outji += '0';
					}
					if (jifen < 10) {
						outji += '0';
					}
					outji += jifen;
					ctx.fillText(outji, ocw / 2, ocw * 93 / 100);
					var ttw = ctx.measureText(' 我的积分 ').width;
					drawRoundedRect('rgba(255, 255, 255, .15)', 'rgba(255, 255, 255, .15)', ocw / 2 - ttw / 2, ocw * 87 / 100, ttw, ocw * 2 / 25, 10);
					//ctx.fillText(goals[0], 180, 90);
					//ctx.fillText(goals[1], 320, 90);
					//ctx.fillText(goals[2], 410, 180);
					//ctx.fillText(goals[3], 410, 320);
					//ctx.fillText(goals[4], 320, 410);
					//ctx.fillText(goals[5], 180, 410);
					//ctx.fillText(goals[6], 90, 320);
					//ctx.fillText(goals[7], 90, 180);
					ctx.save();
					ctx.translate(ocw / 2, ocw * 11 / 25);
					ctx.rotate(startAngle * 45 * Math.PI / 180);
					ctx.translate(-ocw / 2, -ocw * 11 / 25);
					ctx.drawImage(i4, ocw / 10, ocw / 25, ocw * 4 / 5, ocw * 4 / 5);
					ctx.restore();
				}

				function drawTag() {
					spinTime += 1;
					if (spinTime >= spinTimeTotal) {
						startAngle = startAngle % 8;
						if (0 == startAngle) {
							jifen += 1;
						}
						if (1 == startAngle) {
							jifen -= 3;
						}
						if (2 == startAngle) {
							jifen += 3;
						}
						if (4 == startAngle) {
							jifen += 2;
						}
						if (5 == startAngle) {
							jifen += 4;
						}
						if (6 == startAngle) {
							jifen -= 1;
						}
						if (7 == startAngle) {
							jifen -= 2;
						}
						if (jifen < 0 || jifen > 99999999) {
							jifen = 0;
						}
						drawAll(startAngle);
						ctx.fillStyle = '#FA665F';
						ctx.font = ocw * 3 / 50 + 'px 黑体';
						//var cx = parseInt(gx[startAngle]);
						//var cy = parseInt(gy[startAngle]);
						//ctx.fillText(goals[startAngle], cx, cy);
						ctx.fillText(goals[startAngle], gx[startAngle], gy[startAngle]);
						play = 0;
						return;
					}
					startAngle += 1;
					drawAll();
					var timeOver = spinTimeTotal - spinTime;
					if (spinTime < 5 || timeOver < 5) {
						setTimeout(function() {
							drawTag();
						}, 200);
					} else {
						setTimeout(function() {
							drawTag();
						}, 70);
					}
				}

				function roundedRect(cornerX, cornerY, width, height, cornerRadius) {
					if (width > 0) {
						ctx.moveTo(cornerX + cornerRadius, cornerY);
					} else {
						ctx.moveTo(cornerX - cornerRadius, cornerY);
					}
					ctx.arcTo(cornerX + width, cornerY, cornerX + width, cornerY + height, cornerRadius);
					ctx.arcTo(cornerX + width, cornerY + height, cornerX, cornerY + height, cornerRadius);
					ctx.arcTo(cornerX, cornerY + height, cornerX, cornerY, cornerRadius);
					if (width > 0) {
						ctx.arcTo(cornerX, cornerY, cornerX + cornerRadius, cornerY, cornerRadius);
					} else {
						ctx.arcTo(cornerX, cornerY, cornerX - cornerRadius, cornerY, cornerRadius);
					}
				}

				function drawRoundedRect(strokeStyle, fillStyle, cornerX, cornerY, width, height, cornerRadius) {
					ctx.beginPath();
					roundedRect(cornerX, cornerY, width, height, cornerRadius);
					ctx.strokeStyle = strokeStyle;
					ctx.fillStyle = fillStyle;
					ctx.closePath();
					ctx.stroke();
					ctx.fill();
				}
			};
		</script>
	</head>

	<body style="text-align: center">
		<canvas id="smart" width="500" height="500">小器点首页转盘</canvas>
	</body>

</html>